<template>
    <L7Map map-id="my-map" @loaded="handleLoaded" :options="options"></L7Map>
</template>

<script setup lang="ts">
import { Scene, LineLayer } from '@antv/l7'

const options: any = ref({
    pitch: 45.06995336442376,
    center: [102.597971, 23.110479],
    zoom: 13.34,
    rotation: 360,
})
const handleLoaded = async (scene: Scene) => {
    const data = await fetch('/mapjson/highline.json').then(res => res.json())
    const layer = new LineLayer({})
        .source(data)
        .size('ELEV', (h) => {
            return [h % 50 === 0 ? 1.0 : 0.5, (h - 1400) * 20];
        })
        .shape('line')
        .scale('ELEV', {
            type: 'quantize',
        })
        .style({
            heightfixed: true,
        })
        .color('ELEV', [
            '#094D4A',
            '#146968',
            '#1D7F7E',
            '#289899',
            '#34B6B7',
            '#4AC5AF',
            '#5FD3A6',
            '#7BE39E',
            '#A1EDB8',
            '#CEF8D6',
        ]);
    scene.addLayer(layer);
}
</script>
